<template>
    <div class="itemRoot">
        <div class="ctx">
            <div class="head">
                <div class="time">{{ d.orderList.createTime }}</div>
                <div class="status">{{ formatStatus(d.orderList.state) }}</div>
            </div>
            <div class="items">
                <div class="item" v-for="(item, k) in d.goodsList" :key="k">
                    <div class="item_icon">
                        <img class="icon" :src="item.img" alt="">
                    </div>
                    <div class="item_info">
                        <div class="item_name">{{ item.name }}</div>
                    </div>
                    <div class="item_m">
                        <div class="item_money">￥ {{ moneyFormat(item.price) }}</div>
                        <div class="item_much">x{{ item.count }}</div>
                    </div>
                </div>
            </div>
            <div class="total"><span>{{ d.orderList.state == 1 ? '合计应付' : '合计实付' }}:</span><span class="money">￥ {{
                moneyFormat(d.orderList.totalPrice) }}</span></div>
            <div class="bottons">
                <div class="botton" @click="del()"><xxl-botton p="15" back="white" h="30" b="1px solid #999">
                        <div class="b_s" v-show="d.orderList.state > 1">删除订单</div>
                        <div class="b_s" v-show="d.orderList.state == 1">取消订单</div>
                    </xxl-botton>
                </div>
                <div v-show="d.orderList.state > 1" class="botton" @click="toComplaint(d.orderList.id)"><xxl-botton p="15"
                        back="white" h="30" b="1px solid #999">
                        <div class="b_s">投诉</div>
                    </xxl-botton></div>
                <div class="botton" v-show="d.orderList.state == 1" @click="pay()"><xxl-botton p="15" h="30">
                        <div class="b_a">支付订单</div>
                    </xxl-botton></div>
            </div>
        </div>
    </div>
</template>

<script>
import api from '../../api';

export default {
    name: 'WorkspaceJsonItem',

    data() {
        return {

        };
    },

    mounted() {
    },
    props: {
        d: {
            default: {}
        }
    },
    methods: {
        toComplaint(id) {
            uni.navigateTo({
                url: "/pack_complaint/index?id=" + id,
            })
        },
        formatStatus(d) {
            switch (d) {
                case 1:
                    return '待支付'
                case 2:
                    return '已付款'
                case 3:
                    return '已完成'
            }
        },
        async pay(){
            await api.pay(this.d.orderList.id)
            this.$store.dispatch("getOrderDataAll")
        },
        async del(){
            await api.delOrder(this.d.orderList.id)
            this.$store.dispatch("getOrderDataAll")
        }
    },
};
</script>

<style lang="scss" scoped>
.itemRoot {}

.ctx {
    background: $uni-text-color-inverse;
    border-radius: 15px;

    .head {
        display: flex;
        height: 40px;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid $uni-border-color;

        .time,
        .status {
            margin: 0px 15px;
        }
    }

    .items {
        padding: 15px;
    }

    .item {
        display: flex;
        height: 80px;
        margin-bottom: 15px;

        .item_icon {
            width: 80px;
            height: 80px;
            background: rgb(217, 217, 217);
        }

        .icon {
            width: 100%;
            height: 100%;
        }

        .item_info {
            width: calc(100% - 160px);
            box-sizing: border-box;
            padding: 0px 10px;
        }

        .item_m {
            width: 80px;
            text-align: end;

        }

        .item_money {
            font-weight: bold;
        }

        .item_much {
            color: $uni-text-color-grey;
        }
    }

    .total {
        margin: 0px 15px;
    }

    .money {
        color: orangered;
        font-weight: bold;
    }

    .total,
    .bottons {
        display: flex;
        justify-content: flex-end;
    }

    .bottons {
        padding: 15px;

        .botton {
            margin-left: 15px;
        }

        .b_s,
        .b_a {
            font-size: 15px;
            font-weight: lighter;
        }

        .b_s {
            color: $uni-text-color;
        }

        .b_a {
            color: $uni-text-color-inverse;
        }
    }
}</style>